{$layout}

<!-- 检测配置是否有更新 begins -->
<p class="ui message warning" v-if="statusChanged">代理服务已被修改，<a href="" v-on:click.prevent="restart()">点此重启后生效</a></p>

{$var "header"}
<script type="text/javascript" src="/_/@default/proxy/@global.js"></script>
{$end}
<!--  检测配置是否有更新 end -->

<div>
    <h3>{{proxy.description}}<span>（{{filename}}）</span></h3>

    {$template "/proxy/menu"}

    <form class="ui form">
        <table class="ui table selectable width35 celled">
            <thead>
                <tr>
                    <th>规则</th>
                    <th>类型</th>
                    <th></th>
                </tr>
            </thead>
            <tbody v-if="!locationAdding && proxy.locations.length == 0">
                <tr>
                    <td colspan="3" class="normal">
                        <a class="disabled">[暂时还没有路径配置]</a>
                    </td>
                </tr>
            </tbody>
            <tbody v-if="!locationAdding && proxy.locations.length > 0">
                <tr v-for="(location, index) in locations">
                    <td>
                        <span v-if="location.on">{{location.pattern}}</span>
                        <a class="disabled" v-if="!location.on">{{location.pattern}}</a>
                    </td>
                    <td v-if="location.type == 1">前缀</td>
                    <td v-if="location.type == 2">精准匹配</td>
                    <td v-if="location.type == 3">正则表达式</td>
                    <td class="four op">
                        <a :href="$url('/proxy/locations/detail', { 'filename':filename,'index':index })"><i class="ui icon info circle"></i> </a>
                        <a href="" v-on:click.prevent="deleteLocation(index)"><i class="ui icon remove circle"></i> </a>
                        <a href="" v-if="index > 0" title="上移" v-on:click.prevent="moveUp(index)"><i class="ui icon up arrow circle"></i></a>
                        <a href="" v-if="locations.length > 1 && index < locations.length - 1" title="下移" v-on:click.prevent="moveDown(index)"><i class="ui icon down arrow circle"></i></a>
                    </td>
                </tr>
            </tbody>

            <!-- 添加location -->
            <tbody v-if="locationAdding">
                <tr>
                    <td class="title">规则</td>
                    <td colspan="2">
                        <input type="text" name="pattern" v-model="pattern" placeholder="比如 /hello/world"/>
                    </td>
                </tr>
                <tr>
                    <td>规则类型</td>
                    <td colspan="2">
                        <select class="ui dropdown" style="width:10em" name="typeId" v-model="typeId">
                            <option v-for="option in typeOptions" :value="option.value">{{option.name}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>反向匹配</td>
                    <td colspan="2">
                        <div class="ui toggle checkbox">
                            <input type="checkbox" :checked="isReverse" v-on:click.prevent="reverse()"/>
                            <label></label>
                        </div>
                        <p class="comment">选中表示匹配所有<strong>不符合</strong>规则的路径</p>
                    </td>
                </tr>
                <tr>
                    <td>不区分大小写</td>
                    <td colspan="2">
                        <div class="ui toggle checkbox">
                            <input type="checkbox" :checked="isCaseInsensitive" v-on:click.prevent="switchCaseInsensitive()"/>
                            <label></label>
                        </div>
                        <p class="comment">选中表示匹配规则中的路径中的英文字母不区分大小写</p>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2">
                        <a href="" title="保存" v-on:click.prevent="locationSave()"><i class="ui icon check circle"></i> </a> &nbsp;
                        <a href="" title="取消" v-on:click.prevent="locationAdding = false"><i class="ui icon arrow left circle"></i> </a>
                    </td>
                </tr>
            </tbody>
            <tr>
                <td class="title"></td>
                <td class="normal" colspan="2">
                    <a href="" v-on:click.prevent="addLocation()"><i class="ui icon plus circle"></i>新路径配置</a>
                </td>
            </tr>
        </table>
        <p class="comment">所有规则匹配顺序为从上到下。</p>
    </form>
</div>